<template>
  <div class="box">
    <div contenteditable="true" @input="inTextEvent"></div>
    <div contenteditable="true">{{outText}}</div>
  </div>
</template>

<script lang="ts" setup name="cs">
import {ref} from 'vue'

const outText = ref('');

/* 
  tableBtn转换脚本
  1. 找出 TableBtn 标签
  2. 如果params已经转换了 直接跳过
  3. params转成对应的格式
  4. 如果 TableBtn 标签中有插槽按钮那么将这个按钮转换成 params 中的数据结构
  5. 原有 TableBtn 替换成新的数据结构
*/

function inTextEvent(e) {
  console.log(e.target.innerText);
  const text = e.target.innerText
  text
}

</script>

<style lang="less" scoped>
.box {
  display: flex;
  > div:last-child {
    margin-left: 20px;
  }
  > div {
    width: 50%;
    border: 1px solid pink;
    height: 80vh;
    overflow-y: auto;
  }  
}
</style>
